<template>
  <div class="wrap">
    <div class="tab-items flex-center-start">
      <div
        class="tab"
        :class="[isShowUpload ? '' : 'active']"
        @click="isShowUpload = false"
      >
        jzspmbjcgzcl
        <!-- 机载视频目标检测跟踪处理 -->
      </div>
      <div
        class="tab"
        :class="[isShowUpload ? 'active' : '']"
        @click="isShowUpload = true"
      >
        czspmbjcgzcl
        <!-- 车载视频目标检测跟踪处理 -->
      </div>
    </div>
    <uploadVideo :isShowUpload="isShowUpload" />
  </div>
</template>

<script>
import uploadVideo from "@/components/uploadImage_video";
export default {
  components: {
    uploadVideo,
  },
  data() {
    return {
      isShowUpload: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding-left: 30px;
  padding-right: 30px;
}
.tab-items {
  // margin-top: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 216, 245, 0.35);
  line-height: 1;
  .tab {
    cursor: pointer;
    margin-right: 20px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 0;
      height: 2px;
      width: 0px;
      background: #00d8f5;
    }
    &.active {
      color: rgba(0, 216, 245, 01);
      &::after {
        width: 100%;
        transition: width 0.3s;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.upload-demo {
  width: 80px;
  height: 40px;
}
</style>